<template>
    <div>
        <div class="title">
            <div class="text-top">影墨教育</div>
            <div class="text-bottom">后台管理系统</div>
        </div>
        <div class="tree">
            <el-tree :default-checked-keys="[0]" :data="data" accordion @node-click="handleNodeClick">
            </el-tree>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [
                {
                    id: 0,
                    label: '网站配置'
                },
                {
                    id: 999,
                    label: '首页管理',
                    children: [
                        // {
                        //     id: 1,
                        //     label: 'baner管理'
                        // },
                        {
                            id: 2,
                            label: '虚拟仿真'
                        },
                        {
                            id: 3,
                            label: '解决方案'
                        },
                        {
                            id: 4,
                            label: '公司优势'
                        },
                        {
                            id: 5,
                            label: '参与行业'
                        }
                    ]
                },
                {
                    id: 999,
                    label: '产品与服务',
                    children: [
                        {
                            id: 6,
                            label: '类目管理'
                        },
                        {
                            id: 7,
                            label: '详情页管理'
                        },
                        {
                            id: 8,
                            label: '列表管理'
                        }
                    ]
                },
                {
                    id: 9,
                    label: '新闻管理'
                },
                {
                    id: 10,
                    label: '留言查看'
                },
                {
                    id: 11,
                    label: '修改密码'
                }
            ]
        }
    },
    methods: {
        handleNodeClick(data) {
            if (data.id != 999) {
                this.$store.state.flag = true
                this.$store.state.newsid = null
                this.$store.state.details = true
                this.$store.state.detailsid = null
                this.$store.state.listpage = true
                this.$store.state.listpageid = null
                this.$store.state.tabid = data.id
            }
        }
    },
}
</script>
<style scoped lang="less">
.title {
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: center;
    font-weight: 700;

    .text-top {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.tree {
    .el-tree {
        background: transparent;
        color: #fff;
        margin-left: 5px;

        /* 设置图标 */
        /deep/ .el-tree-node__expand-icon {
            position: absolute;
            right: 0;
        }

        /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
        /deep/ .el-tree-node__content {
            height: 50px;

            span {
                margin-left: 5px;
            }
        }

        /deep/ .el-tree-node__label {
            margin-left: 25px !important;
            font-size: 16px;
            // font-weight: 600;
        }

        /* 树节点鼠标悬浮式改变背景色，字体颜色 */
        /deep/.el-tree-node__content:hover {
            border-left: 2px solid #07cad9;
            background: linear-gradient(to right, #038d9a, #006570);
            color: #fff;
        }

        /* 改变节点高度 */
        .el-tree-node__content {
            height: 36px;
        }

        /* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
        .el-tree-node:focus>.el-tree-node__content .el-tree-node__expand-icon {
            color: #fff;
        }

        /* 改变被点击节点背景颜色，字体颜色 */
        /deep/.el-tree-node:focus>.el-tree-node__content {
            // background-color: #3274e6;
            color: #fff;
            border-left: 2px solid #07cad9;
            background: linear-gradient(to right, #038d9a, #006570);
        }
    }
}
</style>